<template>
  <div class="ratings absolute w100"
       ref="ratings">
    <div class="rating-page">
      <div class="overview">
        <div class="overview-left t-c">
          <h3 class="score fw600 f24">{{seller.score}}</h3>
          <p class="text fw700">综合评分</p>
          <p class="desc">高于周边商家{{seller.rankRate}}</p>
        </div>
        <div class="overview-right">
          <div class="overview-right-content flex-def flex-zTopBottom flex-zBetween">
            <div class="item">
              <span class="text">服务态度</span>
              <star :size="36"
                    :score="seller.serviceScore">
              </star>
              <span class="number">
                {{seller.serviceScore}}
              </span>
            </div>
            <div class="item">
              <span class="text">商品评分</span>
              <star :size="36"
                    :score="seller.foodScore">
              </star>
              <span class="number">
                {{seller.foodScore}}
              </span>
            </div>
            <div class="item">
              <span class="text">服务态度</span>
              <!-- <span class="mimus">{{seller.deliveryTime}}分钟</span> -->
              <div class="start-wrpper-wraper relative">
                <star :size="36"
                      :score="seller.foodScore"
                      style="opacity:0">
                </star>
                <span class="mimus absolute">{{seller.deliveryTime}}分钟</span>
              </div>
              <span class="number bug">
                {{seller.foodScore}}
              </span>
            </div>
          </div>
        </div>
      </div>
      <split></split>
      <div class="rating-utils">
        <rating-select :ratings="rating"
                       :select-type="selectType"
                       :only-content="onlyContent"
                       :desc="desc"
                       v-if="rating.length"
                       @setType="setType"
                       @toggle="toggleOnly">

        </rating-select>
      </div>
      <div class="reting-list border-1px-top">
        <div class="rating-list-wrapper">
          <ul>
            <li class="rating-item border-1px-bottom flex-def relative"
                v-for="(ratingSeller,index) in computedRatings"
                :key="index">
              <div class="icon">
                <img :src="ratingSeller.avatar"
                     alt=""
                     width="28"
                     height="28"
                     class="radius">
              </div>
              <div class="rating-content">
                <p class="name f10 fw500">{{ratingSeller.username}}</p>
                <div class="star-time flex-def flex-cCenter">
                  <div class="start-wrapper">
                    <star :size="24"
                          :score="ratingSeller.score">
                    </star>
                  </div>
                  <span class="time">{{ratingSeller.deliveryTime}}分钟送达</span>
                </div>
                <p class="desc f12">{{ratingSeller.text}}</p>
                <div class="love-food flex-def flex-cCenter f0">
                  <span class="iconLove f10"
                        :class="{'icon-thumb_up':ratingSeller.rateType === 0,'icon-thumb_down':ratingSeller.rateType==1}"></span>
                  <div class="love-item border-1px-bottom border-1px-top border-1px-left border-1px-right flex-def flex-cCenter flex-zCenter"
                       v-for="(loveItem,indexLove) in ratingSeller.recommend"
                       :key="indexLove">
                    <span>{{loveItem | formatString(5)}}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Star from 'components/Star/Star';
import Split from 'components/Split/Split';
import BScroll from 'better-scroll';

import RatingSelect from 'components/RatingSelect/RatingSelect';
import { getRatings } from 'api';
import { mixin, seller } from 'mixin';

export default {
  'name': 'ratings',
  'mixins': [mixin, seller],
  data() {
    return {
      'rating': [],
      'desc': {
        'all': '全部',
        'positive': '满意',
        'negative': '不满意'
      }
    };
  },
  'components': { Star, Split, RatingSelect },
  created() {
    // data数据已经初始化，但是DOM结构渲染完成，组件没有加载
    this.selectType = 2;
    this.onlyContent = false;
    this._getRatings({ 'id': this.seller.id });
    this._initScroll();
  },
  mounted() {
    // DOM渲染完成，组件挂载完成
  },
  'computed': {},
  'methods': {
    _initScroll() {
      this.$nextTick(() => {
        if (!this.scroll) this.scroll = new BScroll(this.$refs.ratings, {
          'click': true
        });
        else this.scroll.refresh();
      });
    },
    async _getRatings(id) {
      this.rating = await getRatings(id);
    }
  },
  'watch': {
    selectType(newData, oldData) {
      this._initScroll();
    },
    onlyContent(newData, oldData) {
      this._initScroll();
    }
  },
  'filters': {
    formatString(dataFrom, length) {
      let stringFrmat = dataFrom.replace(/(^\s*)|(\s*$)/g, '');
      if (stringFrmat.length <= length) return stringFrmat;
      return stringFrmat.substr(0, length) + '...';
    }
  }
};
</script>

<style lang='stylus' rel='stylesheet/stylus'>
@import '~common/stylus/mixin'
.ratings
  top 174px
  left 0
  bottom 0px
  overflow hidden
  .rating-page
    .overview
      display flex
      padding(0, 0, 18, 0)
      .overview-left
        flex 0 0 137px
        width 137px
        border-right 1px solid rgba(7, 17, 27, 0.2)
        h3
          color rgb(255, 153, 0)
        .text
          margin-top 6px
          margin-bottom 8px
          color rgb(7, 17, 27)
        .desc
          margin-bottom 6px
          color rgb(147, 153, 159)
          font-weight 400
      .overview-right
        flex 1
        .overview-right-content
          padding(0, 24, 0, 24)
          font-size 0
          .item
            display flex
            justify-content space-between
            align-items center
            margin-top 8px
            .text
              font-size 12px
              font-weight 500
              color rgb(7, 17, 27)
            .number
              font-size 12px
              color rgb(255, 153, 0)
            &:last-child
              .mimus
                font-size 12px
                font-weight 400
                color rgb(147, 153, 159)
                top 50%
                left 0
                transform translate3d(0, -50%, 0)
              .bug
                opacity 0
  .reting-list
    border-1px-top(rgba(7, 17, 27, 0.2))
    .rating-list-wrapper
      padding(18, 18, 18, 18)
      .rating-item
        padding-top 18px
        padding-bottom 18px
        border-1px-bottom(rgba(7, 17, 27, 0.2))
        .icon
          flex 0 0 28px
          width 28px
          margin-right 12px
        .rating-content
          flex 1
          .name
            color rgb(7, 17, 27)
            line-height 16px
          .star-time
            .time
              font-size 10px
              color rgb(147, 153, 159)
              margin-left 4px
              font-weight 350
          .desc
            line-height 16px
            color rgb(1, 17, 27)
            margin-top 6px
            margin-bottom 8px
          .love-food
            flex-wrap wrap
          .icon-thumb_up
            color #00a0dc
          .icon-thumb_down
            color rgb(7, 17, 27, 0.3)
          .love-item
            font-size 10px
            margin-left 6px
            margin-bottom 6px
            padding(2, 5, 2, 5)
            text-align center
            border-1px-top(rgba(7, 17, 27, 0.2))
            border-1px-left(rgba(7, 17, 27, 0.2))
            border-1px-bottom(rgba(7, 17, 27, 0.2))
            border-1px-right(rgba(7, 17, 27, 0.2))
          .iconLove
            margin-bottom 6px
</style>
